<template>
    <div class="div">
        <img v-show='this.$store.state.isflag2' @click='go' src="static/images/empty-car.png" alt="" />

        <ul class="oul1" >

            <li v-for='(item,index) of arr' :key='item.id'>
               <input :value='index'   v-model='listcheck' class="check" type="checkbox" />
                <img  class='oimg' :src="item.imageUrls[0]" alt=""/>
                <div class='odiv'>
                        <p class="p1">{{item.title}}</p>
                        <p  class="p2">零售价:{{item.price}}</p>
                        <input @click='reduce(item)' type="button" value="-" />
                        <input class="s" type="text" :value="item.num" />

                        <input @click='addNum(item)' type="button" value="+" />
                      
                </div>

                <input class="btndel" @click="del(item)" type="button" value="删除"/>

            </li>
        </ul>
    
  
    </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[],
            radio:[],
            listcheck:[]
        }
    },
    created(){
        this.arr=this.$store.state.list;
     
        console.log(this.arr)
        this.arr.map((items)=>{
            this.radio.push({
                id:items.id,
                price:items.price,
                num:items.num,
                check:false,
                imageUrls:items.imageUrls,
                title:items.title
            })
            console.log(this.radio)
        })
    },
 
    methods:{
       
        go(){
            this.$router.push({name:'homepage'})
        },
        reduce(item){
            if(item.num>=1){
                 this.$store.commit('reduce',item)
            }else{
                 this.listcheck.splice(item,1)
            }
           
           

        },
        addNum(item){

            this.$store.commit('addNum',item)
        },
         del(item){
            this.$store.commit('del',item)
            this.listcheck.splice(item,1)
        },
     
     
        
    },
    watch:{
        listcheck(){
          
            console.log(this.listcheck)
            this.bus.$emit('listcheck',this.arr)
            this.bus.$emit('listcheck',this.listcheck)

        
     
        }
    }
 
  
}
</script>

<style lang='scss' scoped>
 $appwidth:375;


@function pxtovw($p){
    @return (100/$appwidth*$p) * 1vw;
}
.div{
    width: 100%;
    margin-top:pxtovw(40);
    img{
    width: 100%;
    margin: 0 auto;
    margin-bottom:pxtovw(20);

    }

    .oul1{
       background: white;
        li{ 
            display: flex;
            width: 100%;
            height: pxtovw(120);
            justify-content: space-around;
            align-items: center;
           
            .oimg{
                width:pxtovw(80);
                height: pxtovw(100);
            }


            .odiv{
                p{
                    font-size: pxtovw(12);
                    color: #aaa;
                }
                .p2{
                    color:red;
                }
                input{
                    outline: none;
                    width:pxtovw(20);
                    text-align: center;
                }
            }

            .btndel{
                font-size: pxtovw(14);
                width: pxtovw(50);

                outline: none;
                border: none;
                background: orangered;
                color: white;
            }
        }
    }
}

</style>
